<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>城市活力</title><!--引入echarts.js-->
    <#--<#include "../../include/head-file.ftl">-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <#--图表-->
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
    <script src="${base}/static/report/map-echarts/hainan.json"></script>
</head>
<body>
<div id="content" style="background: white;">
    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 一、热力图分析 </div>
    <div style="text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至当前，本省各区域活力的热力图如下图所示： </div>
    <div id="map" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 二、热门地点排行 </div>
    <div style="text-indent: 2em; font-size: 20px; margin-top: 20px; line-height: 35px;"> 截至当前，本省热门地点排行TOP10如下所示： </div>
    <div id="myecharts1" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 三、各市签到数据分析 </div>
    <div style="text-indent: 2em; font-size: 20px; margin-top: 20px; line-height: 35px;"> 对于一个地区来说，人流量高的作用之一就是让这个地区的消费水平提高，能够达到带动这一地区经济发展的效果。由下图可看出各市签到数据与GDP之间的变化关系： </div>
    <div style="width: 1000px;margin: 16px auto;overflow: hidden;">
        <div style="float: left;font-size: 18px;font-weight: bold;">签到数据与GDP的变化关系</div>
        <select id="areaId" style="float: right;padding: 5px;min-width: 100px;" onchange="change()"></select>
    </div>
    <div id="myecharts2" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
</div>
<script>
    var result = {
        "三沙市": [
            {
                type: '人口数量',
                datas: [
                    {time: '05-21', count: 195},
                    {time: '05-22', count: 155},
                    {time: '05-23', count: 411},
                    {time: '05-24', count: 45},
                ]
            },
            {
                type: 'GDP',
                datas: [
                    {time: '05-21', count: 484},
                    {time: '05-22', count: 188},
                    {time: '05-23', count: 99},
                    {time: '05-24', count: 115},
                ]
            },
        ],
        "昌江黎族自治县": [
            {
                type: '人口数量',
                datas: [
                    {time: '05-21', count: 556},
                    {time: '05-22', count: 155},
                    {time: '05-23', count: 411},
                    {time: '05-24', count: 45},
                ]
            },
            {
                type: 'GDP',
                datas: [
                    {time: '05-21', count: 484},
                    {time: '05-22', count: 188},
                    {time: '05-23', count: 99},
                    {time: '05-24', count: 115},
                ]
            },
        ],
    }
    $(document).ready(function () {
        // 热力图分析
        var mapData = [
            { pubArea: "海口", pubCount: 6 },
            { pubArea: "白沙", pubCount: 565 },
            { pubArea: "陵水", pubCount: 44 },
        ];
        var labelArr = $.map(mapData, function(n, i){ return n.pubArea })
        var countArr = $.map(mapData, function(n, i){ return n.pubCount })
        var outdata = $.map(mapData, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        })
        var option = {
            tooltip: {
                show: true,
                formatter: function (params) {
                    if (params.value) {
                        return (
                            "&nbsp;&nbsp;" +
                            params.name +
                            "&nbsp;&nbsp;&nbsp;" +
                            params.value +
                            "&nbsp;&nbsp;"
                        );
                    } else {
                        return (
                            "&nbsp;&nbsp;" +
                            params.name +
                            "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                        );
                    }
                },
            },
            visualMap: {
                min: 0,
                max: 1000,
                itemWidth: 10,
                itemHeight: 89,
                orient: "horizontal",
                left: "50",
                top: "0",
                text: ["密", "疏"],
                textStyle: {
                    color: "#666666",
                    fontSize: 13,
                },
                inRange: {
                    color: [
                        "#FFFFFF",
                        "#ADFF2F",
                        "#ADFF2F",
                        "#FFA500",
                        "#FF4500",
                        "#FF0000",
                    ], //['#D9EEFF', '#2F9BFF'],
                },
                outOfRange: {
                    show: false,
                },
            },
            geo: {
                map: "hainan",
                show: true,
                roam: false,
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false,
                    },
                },
                itemStyle: {
                    normal: {
                        show: false,
                    },
                },
            },
            series: [
                {
                    type: "map",
                    map: "hainan",
                    aspectScale: 0.75,
                    zoom: 1.2,
                    label: {
                        normal: {
                            formatter: function (para) {
                                return "{name|" + para.name + "}";
                            },
                            rich: {
                                cnNum: {
                                    fontSize: 11,
                                    color: "#333333",
                                    align: "center",
                                },
                                name: {
                                    fontSize: 10,
                                    color: "#333333",
                                    align: "center",
                                    lineHeight: 20,
                                },
                            },
                            //formatter: '{b}',
                            color: "#333333",
                            show: true,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            areaColor: "#D9EEFF",
                            borderColor: "#fff",
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: "#FFAE00",
                        },
                    },
                    data: outdata,
                    nameMap: {
                        海口市: "海口",
                        三亚市: "三亚",
                        儋州市: "儋州",
                        五指山市: "五指山",
                        琼海市: "琼海",
                        文昌市: "文昌",
                        万宁市: "万宁",
                        东方市: "东方",
                        定安县: "定安",
                        屯昌县: "屯昌",
                        澄迈县: "澄迈",
                        临高县: "临高",
                        白沙黎族自治县: "白沙",
                        昌江黎族自治县: "昌江",
                        乐东黎族自治县: "乐东",
                        陵水黎族自治县: "陵水",
                        保亭黎族苗族自治县: "保亭",
                        琼中黎族苗族自治县: "琼中",
                        南海诸岛: "南海诸岛",
                    },
                },
            ],
        };
        var echartsMap = echarts.init(document.getElementById("map"));
        echarts.registerMap("hainan", hainan);
        echartsMap.setOption(option);

        // 热门地点排行
        var areaData = [
            { area: "海口", count: 6 },
            { area: "白沙", count: 565 },
            { area: "陵水", count: 44 },
            { area: "三亚", count: 221 },
            { area: "琼海", count: 41 },
            { area: "文昌", count: 400 },
            { area: "万宁", count: 144 },
            { area: "东方", count: 94 },
            { area: "儋州", count: 664 },
        ];
        var myecharts1 = echarts.init(document.getElementById("myecharts1"));
        var barYAxisData = $.map(areaData, function(n, i){ return n.area  })
        var barValues = $.map(areaData, function(n, i){ return n.count })
        var optionBar = {
            title: {
                text: "热门地点排行",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            color: ['#4b91ff'],
            legend: false,
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
            },
            yAxis: {
                type: "category",
                data: barYAxisData,
            },
            series: [
                {
                    type: "bar",
                    data: barValues,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: (params) => {
                                console.log(params.value)
                                let result = ''
                                result = params.value / 10000
                                if (params.value > 10000) {
                                    return result + '万'
                                } else {
                                    return params.value
                                }
                            },
                            textStyle: {
                                color: '#4a4b4b',
                            },
                        },
                    },
                }
            ]
        }
        myecharts1.setOption(optionBar);

        // 各市签到数据分析
        var resultKey = [];
        var resultData = [];
        $.each(result,function(key, item) {
            resultKey.push(key)
            var option="<option value="+key+">"+key+"</option>";
            $("#areaId").append(option)
        });
        // 取第一个的值
        resultData = resultKey.length>0? result[resultKey[0]]: [];
        initEcharts(resultData)
    })
    function getOption(xCategory, series, title, legend, color) {
        return {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
            },
            color: color? color: ['#4b91ff'],
            legend: {
                show: legend?true: false,
                data: legend,
                icon: 'circle',
                right: '4%'
            },
            grid: {
                left: "8%",
                right: "4%",
                bottom: "5%",
                containLabel: false,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xCategory,
            },
            yAxis: {
                type: 'value'
            },
            series: series
        }
    }
    function getSCategory(result, type) {
        var series = [], xCategory = [], data = []
        $.each(result,function(index,item) {
            var obj = { name: '', type: 'line', data: [] }
            var count = $.map(item.datas, function(n, i){ return n.count; })
            if(index===0) {
                xCategory = $.map(item.datas, function(n, i){ return n.data; })
            }
            obj.name = item.type;
            obj.data = count;
            series.push(obj);
        });
        return {
            series,
            xCategory
        }
    }
    // 签到数据与GDP的变化关系图形加载
    function initEcharts(datas) {
        var myecharts = echarts.init(document.getElementById("myecharts2"));
        var series = getSCategory(datas).series;
        var xCategory = getSCategory(datas).xCategory;
        var legend = ['人口数量', 'GDP'];
        var optionLine = getOption(xCategory, series, null, legend, ['#4b91ff', '#f2637b', '#fad337']);
        myecharts.setOption(optionLine);
    }
    function change() {
        var areaId = document.getElementById('areaId');
        var d1 = areaId.options[areaId.selectedIndex].value;
        var d2 = areaId.value;
        initEcharts(result[d2])
    }
</script>
</body>
</html>